<script lang="ts" setup>
import { getListByConditions, urls } from '@/index';
import type { DrawerModel, NdePersonCertification, NdePersonOperationRecord } from '@/index.d';
import { useRequest } from 'vue-request';

const drawerModel = defineModel<DrawerModel<NdePersonCertification>>('drawerModel', {
  required: true
});

const title = computed(() => {
  const data = drawerModel.value.data;
  if (data) {
    return (((data.name as string) + data.method) as string) + '连续操作记录';
  } else {
    return '获取数据错误';
  }
});

const {
  data: getNdePersonOperationRecordListData,
  run: getNdePersonOperationRecordListRun,
  loading: getNdePersonOperationRecordListLoading
} = useRequest(() =>
  getListByConditions<NdePersonOperationRecord>(urls.ndePersonOperationRecord, {
    username: drawerModel.value.data?.username,
    method: drawerModel.value.data?.method
  })
);

watch(
  () => drawerModel.value.visible,
  (value: boolean) => {
    value && getNdePersonOperationRecordListRun();
  }
);
</script>
<template>
  <el-drawer v-model="drawerModel.visible" :title destroy-on-close>
    <template #default>
      <HqTable
        :base-url="urls.ndePersonOperationRecord"
        title="无损操作记录"
        :table-data="getNdePersonOperationRecordListData"
        :loading="getNdePersonOperationRecordListLoading"
        :on-handle-reload="getNdePersonOperationRecordListRun"
      >
        <template #columns>
          <HqTableColumn label="方法">
            <template #default="{ row }">
              <el-select v-model="row.method" disabled>
                <HqNdeMethodOptions />
              </el-select>
            </template>
          </HqTableColumn>
          <HqTableColumn label="操作日期" prop="operationDate"></HqTableColumn>
          <HqTableColumn label="操作记录">
            <template #default="{ row }">
              <el-link
                v-if="row.attachmentUrl"
                :href="row.attachmentUrl"
                target="_blank"
                type="primary"
              >
                {{ row.operationRecordReference }}
              </el-link>
              <el-text v-else> {{ row.operationRecordReference }}</el-text>
            </template>
          </HqTableColumn>
        </template>
      </HqTable>
    </template>
  </el-drawer>
</template>
<style lang="scss" scoped></style>
